<template>
  <div v-if="currentStackFrame === 0">
    <div style="padding-bottom: 20px; background: #24252a">
      <MobileOptions :wallet="wallet" @select-wallet="checkWallet" />
    </div>
    <div class="wallet-kit-modal-content-gap"></div>
    <div style="padding: 0 32px; margin-top: 32px">
      <div style="display: flex; flex-direction: column; gap: 8px">
        <div style="font-size: 16px; line-height: 20px; font-weight: bold; text-align: center">What is a Wallet?</div>
        <div style="font-size: 16px; line-height: 20px; text-align: center; color: #ffffff99">
          A wallet is used to send, receive, store, and display digital assets. It's also a new way to log in, without
          needing to create new accounts and passwords on every website.
        </div>
      </div>
    </div>
    <div style="display: flex; gap: 14px; justify-content: center; margin: 32px 0">
      <button @click="getWallet"> Get a Wallet </button>
      <button @click="learnMore"> Learn More </button>
    </div>
  </div>
  <div v-else-if="currentStackFrame === 1">
    <div style="max-height: 250px; overflow-y: scroll">
      <div v-for="(item, index) in shownWallets" :key="index" style="display: flex; gap: 16px; padding: 0 20px">
        <img style="width: 48px; height: 48px; border-radius: 8px" :src="item.icon ?? item.iconUrl" />
        <div style="width: 100%">
          <div style="display: flex; align-items: center; justify-content: space-between; height: 48px">
            <div style="font-size: 18px; line-height: 24px; font-weight: bold">
              {{ item.name }}
            </div>
            <button
              style="border: none; background: #d9fc01; color: #1a1b1f; padding: 4px 12px"
              @click="getWalletApp(item)"
            >
              GET
            </button>
          </div>
          <div
            v-if="index !== shownWallets.length - 1"
            style="height: 1px; background: rgba(255, 255, 255, 0.08); margin: 10px 0"
          ></div>
        </div>
      </div>
    </div>
    <div
      style="
        font-size: 16px;
        text-align: center;
        line-height: 20px;
        margin: 0 auto;
        margin-top: 36px;
        padding-bottom: 36px;
        padding-left: 36px;
        padding-right: 36px;
      "
    >
      <div style="font-weight: bold; margin-bottom: 12px">Not what you're looking for?</div>
      <div style="color: #ffffff99">
        Select a wallet on the main screen to get started with a different wallet provider.
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import MobileOptions from '../ConnectOptions/MobileOptions.vue'
  import { useWalletConnectors, type WalletConnector } from '../../wallets/useWalletConnectors'
  import { addLatestWalletId } from '../../wallets/latestWalletId'
  import { setWalletConnectDeepLink } from '../../wallets/walletConnectDeepLink'
  import { isIOS } from '../../utils/isMobile'

  withDefaults(
    defineProps<{
      currentStackFrame?: number
      wallet?: WalletConnector
    }>(),
    {
      // @ts-ignore
      wallet: {} as WalletConnector
    }
  )

  const emits = defineEmits(['closeModal', 'update:wallet', 'changeStep'])

  const shownWallets = useWalletConnectors().filter(
    (wallet) =>
      wallet.isWalletKitConnector &&
      wallet.ready &&
      (wallet.downloadUrls?.ios || wallet.downloadUrls?.android || wallet.downloadUrls?.mobile)
  )

  const getWallet = () => {
    emits('changeStep', {
      stackFrame: 1,
      modalTitle: 'Get a Wallet'
    })
  }

  const getWalletApp = (wallet: WalletConnector) => {
    const ios = isIOS()
    const downloadUrl =
      (ios ? wallet.downloadUrls?.ios : wallet.downloadUrls?.android) || (wallet.downloadUrls?.mobile as string)
    const link = document.createElement('a')
    link.href = downloadUrl
    link.target = '_blank'
    link.rel = 'noreferrer noopener'
    link.click()
  }

  const learnMore = () => {
    window.open('https://learn.rainbow.me/understanding-web3?utm_source=rainbowkit&utm_campaign=learnmore', '_blank')
  }

  const checkWallet = async (wallet: WalletConnector) => {
    const { connect, id, name, getMobileUri, showWalletConnectModal } = wallet
    addLatestWalletId(name)
    emits('update:wallet', wallet)

    const onMobileUri = async () => {
      const mobileUri = await getMobileUri?.()

      if (!mobileUri) return

      if (mobileUri) {
        setWalletConnectDeepLink({ mobileUri, name })
      }

      if (mobileUri.startsWith('http')) {
        // Workaround for https://github.com/rainbow-me/rainbowkit/issues/524.
        // Using 'window.open' causes issues on iOS in non-Safari browsers and
        // WebViews where a blank tab is left behind after connecting.
        // This is especially bad in some WebView scenarios (e.g. following a
        // link from Twitter) where the user doesn't have any mechanism for
        // closing the blank tab.
        // For whatever reason, links with a target of "_blank" don't suffer
        // from this problem, and programmatically clicking a detached link
        // element with the same attributes also avoids the issue.
        const link = document.createElement('a')
        link.href = mobileUri
        link.target = '_blank'
        link.rel = 'noreferrer noopener'
        link.click()
      } else {
        window.location.href = mobileUri
      }
    }

    if (id !== 'walletConnect') onMobileUri()

    if (showWalletConnectModal) {
      showWalletConnectModal()
      emits('closeModal')
      return
    }

    await connect()
    emits('closeModal')
  }
</script>

<style lang="scss" scoped>
  button {
    cursor: pointer;
    padding: 10px 24px;
    transition: all 0.3s ease;
    border: 1px solid #d9fc0199;
    background: transparent;
    color: #d9fc01;
    border-radius: 24px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: -0.05em;
    line-height: 20px;
    &:active {
      transform: scale(0.95);
    }
  }
  .wallet-kit-modal-content-gap {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
  }
</style>
